<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="baidu-site-verification" content="code-UjJKh3jtOo">
  <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.5.0/styles/atom-one-dark.min.css">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <title>Tit1e</title>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2767111597631391" crossorigin="anonymous"></script>
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Tit1e" type="application/atom+xml">
</head>

<body class="dark">
    <div class="container">
    <header class="header">
  <div class="title">
      <a href="/" class="logo">Tit1e</a>
      <div class="btn-dark"></div>
      <script>
        let bodyClx = document.body.classList;
        let btnDark = document.querySelector('.btn-dark');
        let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
        let darkVal = localStorage.getItem('dark');

        let setDark = (isDark) => {
        bodyClx[isDark ? 'add' : 'remove']('dark');
        localStorage.setItem('dark', isDark ? 'yes' : 'no');
        };

        setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
        requestAnimationFrame(() => bodyClx.remove('not-ready'));

        btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
        sysDark.addEventListener('change', (event) => setDark(event.matches));
      </script>
  </div>
    <ul class="menu">
        
        
        
        
        <li class="menu-item ">
            <a href="/" class="menu-item-link">Home</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/archives/" class="menu-item-link">Archives</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/atom.xml" class="menu-item-link">RSS</a>
        </li>
        
        
        <li class="menu-item ">
            <a target="_blank" rel="noopener" href="https://pixeltimer.art" class="menu-item-link">Pixel Timer</a>
        </li>
        
    </ul>
    <div class="search-box">
        <input type="search" id="search" placeholder="搜索">
    </div>
</header>
    <article class="post">
  <div class="post-meta">
    <span class="post-time">3 / 7, 2017</span>
  </div>
  <div class="post-title">
    <h1 class="title">JavaScript高级程序设计笔记（三）</h1>
  </div>
  
  <ul class="post-tags">
    
    <li class="tag-item">
      #学习
    </li>
    
  </ul>
  
  <div class="post-content">
    <h4 id="引用类型"><a href="#引用类型" class="headerlink" title="引用类型"></a>引用类型</h4><ul>
<li>对象<ul>
<li>对象拥有多个属性，用逗号隔开，并且最后一个属性后面不能加逗号</li>
<li>访问对象属性的方法有两种，用<code>.</code>和用<code>[&#39;XXX&#39;]</code><ul>
<li>例：</li>
</ul>
<pre><code class="javascript">var obj = &#123;
    &#39;first name&#39; : &#39;Chen&#39;,  //这种情况下属性名要用字符串形式
    age : 10
&#125;
obj.age;  //10
obj[&#39;first name&#39;];  //&quot;Chen&quot;
//方括号形式可以用变量来取值
var firstName = &#39;first name&#39;;
obj[firstName];  //&quot;Chen&quot;  
</code></pre>
<span id="more"></span></li>
</ul>
</li>
<li>数组<ul>
<li>不要使用逗号创建数组某个长度的数组，也不要在数组末尾加逗号，IE和其他浏览器数组长度会产生分歧<ul>
<li>例：<pre><code class="javascript">var a = [,,,,,];  //不要使用这种写法
var b = [1,2,3,4,];  //不要使用这种写法
var c = new Array(3);  //使用构造函数创建数组的时候，传入的参数如果只有一个并且是数字，则会创建相应长度的数组
var d = new Array(1,2);  // [1,2]
</code></pre>
</li>
</ul>
</li>
<li>数组元素的读取于修改<ul>
<li>例：<pre><code class="javascript">var num = [1,2,3,4,5,6];
num[0];  //1
num[3];  //4
num[10];  //undefined 不报错

num[0] = 10;  //修改数组
num;  //[10,2,3,4,5,6]

num[6] = 7;  //新增元素
num;  //[10,2,3,4,5,6,7]

num.length = 5;  //重新设置数组长度，超出长度的元素会被删除
num;  //[10, 2, 3, 4, 5]

num[99] = 100;  //修改数字长度，6-98的元素都是undefined
num.length;  //100
</code></pre>
</li>
</ul>
</li>
<li>操作数组<strong>（例子代码中没有重新声明默认使用之前的变量）</strong><ul>
<li><code>join()</code>方法返回字符串，将数组中的元素用指定的元素连接起来<pre><code class="javascript">var num = [1,2,3,4,5];
num.join();  //&quot;1,2,3,4,5&quot;
num.join(&#39; &#39;);  //&quot;1 2 3 4 5&quot;
num.join(&#39;|&#39;);  //&quot;1|2|3|4|5&quot;
</code></pre>
</li>
<li><code>push()</code>方法可以在数组末尾添加新元素，并且返回新数组的长度，也可以一次添加多个元素<pre><code class="javascript">num.push(6);
num;  //[1,2,3,4,5,6]
num.push(7,8);
num;  //[1,2,3,4,5,6,7,8]
</code></pre>
</li>
<li><code>pop()</code>方法将移除数组的最后一项，并且返回移除项<pre><code class="javascript">num.pop();  //8
num;  //[1,2,3,4,5,6,7]
</code></pre>
</li>
<li><code>shift()</code>方法将移除数组第一项，并且返回移除项<pre><code class="javascript">num.shift();  //1
num;  //[2,3,4,5,6,7]
</code></pre>
</li>
<li><code>unshift()</code>方法作用类似push(),不过是向数组前端添加一个或多个元素，并返回新数组长度<pre><code class="javascript">num.unshift(1);  //7 
num;  //[1,2,3,4,5,6,7]
</code></pre>
</li>
<li><code>reverse()</code>方法会逆序数组<pre><code class="javascript">num.reverse();  //[7, 6, 5, 4, 3, 2, 1]
</code></pre>
</li>
<li><code>sort()</code>方法会将数组中的元素转换为字符串，然后进行比较<pre><code class="javascript">var num2 = [&#39;a&#39;,&#39;g&#39;,&#39;e&#39;,&#39;v&#39;];
num2.sort();  //[&quot;a&quot;, &quot;e&quot;, &quot;g&quot;, &quot;v&quot;]
//sort()支持传入一个指定函数来自定义排序顺序，但是遵循以下规则：
    1.若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
    2.若 a 等于 b，则返回 0。
    3.若 a 大于 b，则返回一个大于 0 的值。
var str = [&#39;basketball&#39;,&#39;atom&#39;,&#39;cat&#39;,&#39;do&#39;];
str.sort();  //[&quot;atom&quot;, &quot;basketball&quot;, &quot;cat&quot;, &quot;do&quot;]
//如果我们想根据字符串长度来排序，那么我们要写一个比较函数：
function compare(val1,val2)&#123;
    return val1.length-val2.length;
&#125;
str.sort(compare);  //[&quot;do&quot;, &quot;cat&quot;, &quot;atom&quot;, &quot;basketball&quot;]
</code></pre>
</li>
<li><code>concat()</code>可以复制目标数组，并且传入新元素到复制后的数组，返回一个新数组，如果不传参数，那么就是单纯的复制一个数组,并且是独立的一个数组<pre><code class="javascript">var arr = [1,2,3,4,5];
arr.concat(6);  //[1,2,3,4,5,6]
</code></pre>
</li>
<li><code>slice()</code>方法可以截取目标数组为一个新数组，接受两个参数，第一个是截取开始位置，第二个是结束位置，但是返回的新数组中不包括结束位置处的元素<pre><code class="javascript">arr.slice(1,4);  //[2,3,4] 位置4处的元素为5，但是没有取到5
arr.silice(0);  //[1,2,3,4,5] 只传入起始位置，默认取到最后的元素，如果传入0，则相当于复制整个数组
</code></pre>
</li>
<li><code>splice()</code>方法能对数组进行删除，插入，替换操作，接受三个参数，第一个是开始删除的位置，第二个是删除的个数，第三个是插入的元素，返回删除的元素，没有删除则返回空数组<pre><code class="javascript">arr.splice(0,2);  //[1,2];  删除数组前两项
arr;  //[3,4,5];

arr.splice(0,0,1,2);  //[]   在数组最开始处新增元素
arr;  //[1, 2, 3, 4, 5]

arr.splice(2,1,6);  //[3]  替换索引2处的元素为6
arr;  //[1, 2, 6, 4, 5]
</code></pre>
</li>
<li><code>indexOf()</code>和<code>lastIndexOf()</code>方法用于查找数组中的某项的索引位置,只是<code>indexOf()</code>从第一项开始找，而<code>lastIndexOf()</code>从最后一项开始找,若没找到返回-1,<code>indexOf()</code>查找时用的是严格相等，可以传两个参数，查找的项和起始查找位置<pre><code class="javascript">var arr = [1,2,3,4,5];
arr.indexOf(2);  //1
arr.lastIndexOf(2);  //1
arr.indexOf(10);  //-1
var person = &#123; name: &quot;Nicholas&quot; &#125;;
var people = [&#123; name: &quot;Nicholas&quot; &#125;];
var morePeople = [person];
alert(people.indexOf(person));     //-1  因为person中的&#123; name: &quot;Nicholas&quot; &#125;和people中的&#123; name: &quot;Nicholas&quot; &#125;是两个不同的对象，因此严格相等的情况下是不成立的，因此返回-1
alert(morePeople.indexOf(person)); //0
</code></pre>
</li>
<li><code>every()</code>方法会对数组中的每一项执行一个给定的函数，如果该函数对每一项都返回true，那么返回true,传入的函数接受三个参数，数组项的值，该项在数组中的位置和数组对象本身<pre><code class="javascript">var arr = [1,2,3,4,5];
arr.every(function(item,index,array)&#123;
    return (item &lt; 6);
&#125;)  //true
</code></pre>
</li>
<li><code>some()</code>方法和<code>every()</code>方法类似，<code>some()</code>方法会对数组中的每一项执行一个给定的函数，如果该函数对任意一项或多项返回true，那就返回true,传入的函数接受三个参数，数组项的值，该项在数组中的位置和数组对象本身<pre><code class="javascript">var arr = [1,2,3,4,5];
arr.some(function(item,index,array)&#123;
    return (item &lt; 2);
&#125;)  //true
</code></pre>
</li>
<li><code>filter()</code>方法会对数组中的每一项执行一个给定的函数，返回一个函数执行结果为true项的数组，传入的函数接受三个参数，数组项的值，该项在数组中的位置和数组对象本身<pre><code class="javascript">var arr = [1,2,3,4,5];
arr.filter(function(item,index,array)&#123;
    return (item &lt; 2);
&#125;)  //[1]
</code></pre>
</li>
<li><code>forEach()</code>方法会对数组中的每一项执行一个给定的函数，该方法没有返回值</li>
<li><code>map()</code>方法会对数组中的每一项执行一个给定的函数，返回每次调用结果组成的数组<pre><code class="javascript">var arr = [1,2,3,4,5];
arr.map(function(item,index,array)&#123;
    return (item+1);
&#125;)  //[2, 3, 4, 5, 6]
</code></pre>
</li>
<li><code>reduce()</code>和<code>reduceRight()</code>方法会迭代数组所有项，然后构建一个最终返回的值，这两个方法接受两个参数，第一个参数为传入的函数和作为归并的初始值，而传给<code>reduce()</code>和<code>reduceRight()</code>的函数接受四个参数：前一个值，当前值，项的索引和数组对象<pre><code class="javascript">var arr = [1,2,3,4,5];
arr.reduce(function(pre,item,index,array)&#123;
    return (pre+item);
&#125;)  //15
var arr = [1,2,3,4,5];
arr.reduce(function(pre,item,index,array)&#123;
    return (pre+item);
&#125;,10)  //25
</code></pre>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="Function"><a href="#Function" class="headerlink" title="Function"></a>Function</h4><ul>
<li>函数定义方式<ul>
<li>函数声明<pre><code class="javascript">function a()&#123;
    //code...
&#125;
</code></pre>
</li>
<li>函数表达式(这种方式定义的函数需要在结尾加<code>;</code>)<pre><code class="javascript">var a = function ()&#123;
    //code...
&#125;;
</code></pre>
</li>
<li>函数声明方式定义的函数的函数，声明可以写在调用之后，因为无论写在哪，在执行前声明的函数都会被提升到顶部，然后执行下面的代码。而表达式定义的函数不行。<pre><code class="javascript">fn();
function fn()&#123;
    alert(&quot;Hello!&quot;);
&#125;   //正常执行

fn2();
var fn2 = function()&#123;
    alert(&quot;World!&quot;);
&#125;  //报错
</code></pre>
</li>
<li>函数中的<code>this</code>指向调用的对象，如果全局下调用，则<code>this</code>指向<code>window</code>，如果是某个对象调用则是指向这个对象</li>
<li>函数有两个属性，<code>length</code>和<code>prototype</code>，<code>length</code>代表函数传入参数的个数，而<code>prototype</code>是保存引用类型所有实例方法的真正所在。像<code>toString()</code>和<code>valueOf()</code>等方法都保存在这个属性中。<code>prototype</code>属性不可枚举，无法用<code>for in </code>发现。</li>
<li>每个函数都包含两个不是通过继承的来的方法<code>call()</code>和<code>apply()</code>，关于这两个方法的详细解释可参考<a target="_blank" rel="noopener" href="http://tit1e.xyz/2017/03/03/25.apply-and-call/">apply和call的区别</a></li>
</ul>
</li>
</ul>

  </div>
  <div class="post-near">
    
    <a
      class="post-near-prev"
      href="/p/af946ded.html"
      title="一些工作中常用到的代码"
    >
      <span class="arrow">←</span>
      <span class="post-near-title">
        一些工作中常用到的代码
      </span>
    </a>
    
    
    <a
      class="post-near-next"
      href="/p/5e4d0204.html"
      title="JavaScript高级程序设计笔记（二）"
    >
      <span class="post-near-title">
        JavaScript高级程序设计笔记（二）
      </span>
      <span class="arrow">→</span>
    </a>
    
  </div>
</article>

    <footer class="footer">
  <p>本博客采用 <a class="license-link" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际</a>协议进行许可</p>
  <p>
    <span>Thanks For <a target="_blank" rel="noopener" href="https://github.com/nanxiaobei/hugo-paper" taget="_blank">hugo-paper</a></span>
    <span style="margin-left: 10px;">&copy; 2016-2025 by Tit1e</span>
  </p>
</footer>
    </div>
    <script src="//unpkg.com/@highlightjs/cdn-assets@11.5.0/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
  var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?6349d3bc54baea0b04a65145c5e3b799";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
    })();
    const block = document.querySelectorAll('.post-content')[0]
    block.addEventListener('click', e => {
        const {nodeName, src} = e.target
        if(nodeName !== 'IMG') return
        document.body.classList.add('overflow-hidden')
        const div = document.createElement('div')
        div.id = 'global-cover'
        div.title = '点击关闭'
        const a = document.createElement('a')
        a.href = src
        a.target="_blank"
        a.title = '点击打开原图'
        const img = document.createElement('img')
        img.className = 'show-pic'
        img.src = src
        a.appendChild(img)
        div.appendChild(a)
        document.body.appendChild(div)
    })
    document.body.addEventListener('click', e => {
        if(e.target.id === 'global-cover'){
            document.body.classList.remove('overflow-hidden')
            document.body.removeChild(e.target)
        }
    })
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7M04VN3JZ4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-7M04VN3JZ4');
</script>

<script src="/js/search.js"></script>


</body>
</html>